<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>组件参数校验与非props特性</title>
    <script src="../../vue.js"></script>
</head>

<body>
    <div id="app">
        <child :content='"haha"'></child> <!-- 2. 使用组件的标签,绑定一个属性用来传值给子组件,注意绑定之后的属性值是js,字符串需要用引号 -->
    </div>

    <script>
        Vue.component('child', { // 1. 定义一个组件
            props: { // 3. props不再是一个数组,因为要校验,所以是一个对象
                content: { // 4. 这里的属性名就是组件标签中绑定的属性,因为要校验,所以这里也是一个对象
                    type: [String, Number], // 5. type属性表示校验数据类型,多种类型使用数组,单个类型直接写类型就好
                    required: false, // 6. 表示数据是否是必传
                    default: 'default value', // 7. 设置默认值,就是没有组件标签上的属性的时候才会展示这个,有标签值为空也不会展示默认值
                    validator: function (val) { // 8. 这里是自定义的校验,这是一个方法,参数就是传过来的值,返回结果为true时就是校验通过
                        if (val !== null && val !== undefined && val !== '' && val !== 'null' && val !== 'undefined') {
                            if (!isNaN(val))
                                return true;
                            else
                                return (val.length > 5);
                        } else {
                            return false;
                        }
                    }
                }
            },
            template: '<div>{{content}}</div>'
        });

        /* 
            非props特性:
                非props不会接受父组件传递的值,并且在组件标签中的属性及属性值带到template中定义的标签中
        */

        const app = new Vue({
            el: '#app',

        })
    </script>
</body>

</html>